<template>
    <div class="content">

        <div class="flex">

            <el-col class="flex" :span="7">
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <input class="input1" placeholder="请输入" v-model="search.keyWord" @keydown.13="toSearch" type="text">
            </el-col>
     
            <el-col class="flex  " :span="7">
                <el-date-picker v-model="dateArray" type="datetimerange" range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']" @change="changeDate" style="width:360px;">
                </el-date-picker>
            </el-col>
            <el-col class="flex  " :span="4">
                <el-button type="primary" icon="el-icon-search" size="small" @click="toSearch">搜索</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
            </el-col>

        </div>













        <div>
            <el-table v-loading="loading" :data="tableData" border style="width: 100%">

                <el-table-column fixed prop="sort" label="排序" width="120">
                </el-table-column>


                <el-table-column prop="CreateDate" label="日期" width="150">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.CreateDate | mytime }}
                        </div>
                    </template>



                </el-table-column>




                <el-table-column prop="articleTitle" label="章节" width="120">
                </el-table-column>
                <el-table-column prop="status" label="收费" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">

                        <el-switch @change="ishotChangde(scope.$index)" v-model="scope.row.status" active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>


                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row,scope.$index)" type="text" size="small">查看</el-button>
             
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background :page-size=6 @current-change="searchPage" layout="prev, pager, next"
                :total="total">
            </el-pagination>
        </div>



        <el-dialog :modal="false" title="提示" :before-close="cancel1" :visible.sync="showIshot" width="30%">
            <span>确认{{ status ? '加入' : '取消' }} 收费?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel1">取 消</el-button>
                <el-button type="primary" @click="sendchangde">确 定</el-button>
            </span>
        </el-dialog>

        
        <el-dialog :modal="false" title="文章内容" :before-close="cancel2" :visible.sync="contentshow" width="70%">
            <div>

                <div>
  <el-input placeholder="请输入内容" v-model="title">
    <template slot="prepend">章节名</template>
  </el-input>
</div>

                    <!-- <textarea style="width: 100%;" name="" id="" cols="30" rows="10">
 
                        {{content}}
                    
                    </textarea> -->
                    <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10}"
                placeholder="请输入内容"
                v-model="content">
                </el-input>




            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel2">取 消</el-button>
                <el-button type="primary" @click="changecontent">确 定</el-button>
            </span>
        </el-dialog>











    </div>
</template>

<script>
import { partlist , novelpartstatus ,novelpartcontent} from '@/api/novel'

export default {
    props: ['id'],
    data() {
        return {
            title:"",
            content:"",
            contentshow:false,
            selcedid: 0,
            status: true,
            showIshot: false,
            selcedindex: null,
            Selectionid: "0",
            options: [{
                value: '0',
                label: '综合搜索'
            }, {
                value: 'orderSn',
                label: '订单'
            }, {
                value: 'shareUserId',
                label: '代理'
            },

            {
                value: 'userId',
                label: '用户'
            },
            {
                value: 'novel.name',
                label: '小说名'
            },
            ],
            value: '0',
            dateArray: [],
            loading: false,
            total: 10,
            tableData: [],
            search: {
                page: 1,
                size: 6,
                keyWord: "",
                order: { sort: "ASC" },
                where: {},
                AndWhere: { 'Pid.id': [this.$props.id] }
                // 选范围
            },
            checkboxStatus: [],
            checkboxGroup1: [{ name: "待付款", status: 0 }, { name: "已付款", status: 3 }]
            ,
            obj: [{ id: 1, weight: 888, message: 666, asdasd: "ASdasdasd", }, { id: 2, weight: 7877, message: 666 }],

        }
    },
    components:{
        // Editor, Toolbar
    },
    created() {
        this.rendtable()


    },
    watch: {
        $props: {
            deep: true,
            handler: "rendtable"
        }
    },

    methods: {
        handleClick(value,index){
            
                this.contentshow=true
                // console.log( "文章内容" ,value.articleContent);
                this.content =value.articleContent
                this.title =value.articleTitle
                this.selcedindex = index
                this.selcedid = value.id
                console.log(this.selcedindex);
        },
        // 
        ishotChangde(value) {
            this.selcedindex = value
            console.log(this);
            this.status = this.tableData[value].status
            // // 
            this.selcedid = this.tableData[value].id

            this.showIshot = true
        },
       async sendchangde() {
            console.log("确定",this.status);
            console.log({ status: this.status, where: { id: this.selcedid } });
            let status = this.status
           let result   =  await novelpartstatus({status: status , id:  this.selcedid })
           if(result.code ==20000){
            this.$msg({
                            message:"修改成功",
                            type:"success",
                            duration:1000
                          })
           }
            // await  this.sendchangde(  { ishot:isHOT , where: { id :   this.selcedid   }  } )
            this.showIshot =false
        },

        cancel2(){
            this.contentshow=false
        },
      async  changecontent(row){
                //  判断  当前contenn 跟 表单中 content 一不致一致

                console.log(   this.title !=this.tableData[this.selcedindex].articleTitle);
                var  obj = { }

                if(this.title !=this.tableData[this.selcedindex].articleTitle ){
                        obj.articleTitle = this.title 
                }

                if(    this.content !=this.tableData[this.selcedindex].articleContent ){
                    obj.articleContent = this.content
                }
               if(JSON.stringify(obj) == JSON.stringify({})){
                this.contentshow=false
                        return 
               }

               console.log( 'row.id',row.id);
                let result   =  await novelpartcontent({...obj, id:   this.selcedid })
           if(result.code ==20000){
            this.$msg({
                            message:"修改成功",
                            type:"success",
                            duration:1000
                          })
           }
                //  await  req(  {  ...obj ,  where:  { id : this.tableData[this.selcedindex].id }  }     )
                this.contentshow=false
        },
        cancel1() {
            this.tableData[this.selcedindex].status = !this.tableData[this.selcedindex].status
            this.showIshot = false
        },




        // 时间
        changeDate(e) {
            console.log(e);
            this.search.where['CreateDate'] = e
        },
        toSearch() {
            console.log(123231, "节流");
            this.rendtable()
        },


        //reset 
        reset() {
            this.search = {
                page: 1,
                size: 6,
                keyWord: "",
                where: {},
                AndWhere: {}
            }
            this.checkboxStatus = this.dateArray = []

        },
        searchPage(value) {
            //   变换页数
            this.search.page = value
            this.rendtable()



        },
        change(value) {

            this.search.AndWhere['status'] = value
            this.rendtable()
        },
        async rendtable() {
            this.loading = true
            var newSearch = this.search

            if (this.value != "0" && this.search.keyWord != "") {
                let { keyWord, ...arg } = this.search
                console.log('arg', arg);

                //  深克隆   为了不影响后续 搜索
                newSearch = JSON.parse(JSON.stringify(arg))
                console.log('newSearch', newSearch)
                newSearch.AndWhere[`${this.value}`] = [keyWord]
            }

            let result = await partlist(newSearch)
            this.loading = false
            console.log(result);
            this.tableData = result.data.list
            this.total = result.data.pagination.total
        }
    },
}
</script>

<style lang="scss" scoped>
.content {
    padding: 30px;
}

.flex {
    display: flex;
    align-items: center;
}

.margin50 {
    margin-left: 20px;
}

.search {}

.input1 {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;

    &:hover {

        border-color: #409eff;
    }
}
</style>